import React, { useCallback, useState } from "react";
import styles from "./styles.module.scss";
import logoImage from "../../img/youzhubao_chatgpt.jpg";
import { Input, SmsOtp, VerifyCode } from "./Input";
import { Button } from "antd";
import { LibAppView, Validation } from "../../lib";
import { App } from "antd";

const MobileLogin = LibAppView.withService({
    reqEndPoints: [
        {
            endPoint: "setting.configWebsite",
            name: "config"
        }
    ]
})((props) => {
    const [ config ] = useState((props.responseData as any)?.config?.data || []);
    const [ configRight ] = useState(() => config.copyright || "优注宝");
    const [ loading, setLoading ] = useState(false);
    const app = LibAppView.useApp();
    const { message } = App.useApp();
    const onSubmit = useCallback((data: any) => {
        setLoading(true);
        props.withServiceApi.send({
            endPoint: "login.loginByPhoneNumber",
            data: {
                mobileNumber: data['vd-mobile'],
                verifyCode: data['vd-verifyCode'],
                smsCode: data['vd-smsotp']
            }
        }).then(() => {
            app.goto("home.openAiChat");
        }).catch((err) => {
            message.error(err.message || "未知错误");
            setLoading(false);
        });
    }, []);
    return (<div className={styles.mobileLogin}>
        <Validation.ValidatedForm
            hideSuccessMessage
            validateOnBlur
            tag={"mobileLogin"}
            disabled={loading}
            onSubmit={onSubmit}
            onFaild={(error) => {
                console.error(error);
            }}
        >
            <section className={styles.mobileLoginContent}>
                <i className={styles.mobileLoginLogo}>
                    <img src={logoImage}/>
                </i>
                <div className={styles.mobileLoginForm}>
                    <h5>LOGIN</h5>
                    <section>
                        <Validation.Validated id="vd-mobile" tag="mobileLogin" valueFromChild rules={[
                            { type: "isRequired", message: "手机号码不能为空。" },
                            { type: "Mobile", message: "请输入正确的手机号码" }
                        ]}>
                            <Input type="tel" maxLength={11} label="手机号" name="mobile" placeholder="请输入"  >
                                <Validation.ValidatedMessage />
                            </Input>
                        </Validation.Validated>
                        <Validation.Validated id="vd-verifyCode" tag="mobileLogin" valueFromChild rules={[
                            { type: "isRequired", message: "图形验证码不能为空" }
                        ]}>
                            <VerifyCode type="text" name="verifyCode" maxLength={6} label="图形验证码" placeholder="请输入" >
                                <Validation.ValidatedMessage />
                            </VerifyCode>
                        </Validation.Validated>
                        <Validation.Validated id="vd-smsotp" tag="mobileLogin" valueFromChild rules={[
                            { type: "isRequired", message: "手机验证码不能为空" }
                        ]}>
                            <SmsOtp type="number" maxLength={6} label="验证码" name="smsOtp" placeholder="请输入" >
                                <Validation.ValidatedMessage />
                            </SmsOtp>
                        </Validation.Validated>
                        <ul>
                            <li>目前仅限受邀用户使用</li>
                        </ul>
                        <Button loading={loading} type="primary" htmlType="submit">登录</Button>
                    </section>
                </div>
            </section>
        </Validation.ValidatedForm>
        <label className={styles.copyright}><span>Copyright © {configRight}. All rights reserved.</span></label>
    </div>);
});

export default MobileLogin;